/**
 * Created by Steven on 2018/1/7.
 */
import React from 'react';
import {
  StyleSheet,
  Text,
  Image,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

const { width } = Dimensions.get('window');

const thirdWidth = width / 3;

const imageWidth = thirdWidth - 10 * 2;

const imageHeight = imageWidth / 0.697;

const styles = StyleSheet.create({
  root: {
    marginTop: 20,
    width: imageWidth,
    marginLeft: 15,
  },
  image: {
    width: imageWidth,
    height: imageHeight,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 5,
  },
  starsWrapper: {
    flexDirection: 'row',
  },
  stars: {
    width: 10,
    height: 10,
  },
});
// export default class Item extends Component {
//   state ={
//     text: '占位文字',
//     imageUrl: '',
//   }
//
//   componentWillReceiveProps(params) {
//     this.setState({
//       text: params.text,
//       imageUrl: params.imageUrl,
//     });
//   }
//   render() {
//     const { imageUrl, text } = this.state;
//     return (
//       <View style={styles.root}>
//         <Image
//           source={{ uri: imageUrl }}
//           style={styles.image}
//         />
//         <Text style={styles.title}>{text}</Text>
//       </View>
//     );
//   }
// }

const Item = (pros) => {
  const { imageUrl, text, onPress } = pros;
  return (
    <TouchableOpacity style={styles.root} onPress={onPress}>
      <Image
        source={{ uri: imageUrl }}
        style={styles.image}
      />
      <Text style={styles.title}>{text}</Text>
    </TouchableOpacity>
  );
};
export default Item;
